<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>个人主页</title>
    

    <link href="/static/h5/css/mui.min.css" rel="stylesheet"/>
    <link href="/static/h5/css/icons-extra.css" rel="stylesheet"/>
    <link href="/static/h5/css/import.css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<div class="mui-content">
		<div class="mui-table-view sy-user-photo mui-text-center">
			<div class="user-img">
				<span class="photo-image">
					<span class="itBg" style="background-image: url('images/muwu.jpg');"></span>
				</span>
				<{if $info.gender == 1}>
				<i class="iconBoy"></i><!--iconBoy：男-->
				<{else}>
				<i class="iconGirl"></i><!--iconGirl：女-->
				<{/if}>
			</div>
			<div class="mui-h4"><span style="color: #fff;"><{$info.child_name}></span></div>
			<p><span style="color: #e4e4e4;"><{$info.grade}></span></p>
			
			<div class="mui-table-view sy-plyh-list">
				<ul class="mui-col-lay">
					<li class="muiCol">
						<div class="c-3ac9af"><{$info.habit_total}></div>
						<p>好习惯</p>
					</li>
					<li class="muiCol">
						<div class="c-3ac9af"><{$info.stars_total}></div>
						<p>累积星星</p>
					</li>
					<li class="muiCol">
						<div class="c-3ac9af"><{$info.reward_total}></div>
						<p>累计奖励</p>
					</li>
					<li class="muiCol">
						<div class="c-3ac9af"><{$info.learning_score}></div>
						<p>作业评分</p>
					</li>
				</ul>
			</div>
		</div>
		
		<!--my开始-->
		<div id="example-my" style="padding-top: 5px;"><!--VueJS 渲染ID所用的开始-->
			<div class="mui-card-content m-t10" v-for="(item,dataItem) in listCard">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:;">
							<div class="mui-media-body">
								<div class="mui-demo01-title mui-table">
									<div class="mui-table-cell mui-ellipsis">{{ item.habit_name }}</div>
								</div>
								<p class="mui-ellipsis">{{item.habit_start_end}}{{item.habit_days}}</p>
							</div>
							<div class="sy-view-image">
								<div class="v itemImage" v-for="subitem in item.records">
									<div class="v-thumb ithImg">
										<div class="v-pic-default"><img src="/static/h5/images/1B1.png"></div>
										<div class="v-pic-real">
											<div class="v-pic-real text-image" v-if="subitem.image" v-bind:style="{backgroundImage:'url('+subitem.image+')'}"></div>
											<div class="text-font">
												<div class="iGm_tit">{{subitem.text}}</div>
												<p class="mui-text-center mui-h6">{{subitem.date}}</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
 	<script>
        var vm = new Vue({
            el: "#example-my",
            data: {
                listCard: '',
                subCard: ''
            },
            methods : {
                getdata: function (e) {
                	console.log('func a run !');
                    axios.post("/h5/user/get_child_habit_report",{childer_id: <{$child_id}>}).then(function (response) {
                        console.log(response.data.data.list);
                        let data = response.data;
                        var listCardData = [
									      {title: '每天运动一小时'},
									      {title: '每天喝一瓶牛奶'},
									      {title: '每天午休十次'}
									    ];
						vm.listCard = response.data.data.list;
                    }).catch(function (error) {

                    })
                },
            }
        })
        vm.getdata();
    </script>
</body>
</html>